function Scoreboard(dom, init, fontSize, spanHeight) {
    this.number = String(init).split('').reverse();
    this.numberNext = String(init).split('').reverse();
    this.spanContainer = [];
    this.numSpan = [];
    this.numSpanNext = [];
    this.spanHeight = spanHeight;
    this.fontSize = fontSize;

    this.number.forEach(function(element, index) {
        if(index !== 0 && index % 3 === 0) {
            var comma = document.createElement('span');
            comma.innerHTML = ',';
            comma.className = 'num-span';
            comma.style.fontSize = fontSize + 'px';
            comma.style.height = spanHeight + 'px';

            var commaNext = document.createElement('span');
            commaNext.innerHTML = ',';
            commaNext.className = 'num-span';
            commaNext.style.fontSize = fontSize + 'px';
            commaNext.style.height = spanHeight + 'px';

            var oneNumContainer = document.createElement('div');
            oneNumContainer.className = 'one-num-container'
            oneNumContainer.appendChild(comma);
            oneNumContainer.appendChild(commaNext);
            this.spanContainer.push(oneNumContainer);
        }

        var span = document.createElement('span');
        span.innerHTML = element;
        span.className = 'num-span';
        span.style.fontSize = fontSize + 'px';
        span.style.height = spanHeight + 'px';
        this.numSpan.push(span);

        var spanNext = document.createElement('span');
        spanNext.innerHTML = element;
        spanNext.className = 'num-span';
        spanNext.style.fontSize = fontSize + 'px';
        spanNext.style.height = spanHeight + 'px';
        this.numSpanNext.push(spanNext);

        var oneNumContainer = document.createElement('div');
        oneNumContainer.className = 'one-num-container'
        oneNumContainer.appendChild(span);
        oneNumContainer.appendChild(spanNext);
        this.spanContainer.push(oneNumContainer);
    }, this);

    this.container = document.createElement('div');
    this.container.className = 'num-container'

    this.spanContainer.reverse();

    for(var i = 0; i < this.spanContainer.length; i++) {
        this.container.appendChild(this.spanContainer[i]);
    }

    dom.appendChild(this.container);
}

Scoreboard.prototype.set = function(num) {
    var number = String(num).split('').reverse();
    if(number.length === this.number.length) {
        var changeList = [];
        number.forEach(function(element, index) {
            if(this.numSpanNext[index].innerHTML != element) {
                this.numSpanNext[index].innerHTML = element;
                changeList.push(index);
            }
        }, this);
        this.number = number
        this.change(changeList);
    }
    else if(number.length > this.number.length) {
        var n = this.number.length % 3;
        var length = this.number.length;
        var lengthCon = this.spanContainer.length

        for(var i = length; i < number.length; i++) {
            this.number.push('0');

            if(n == 0 || n % 3 === 0) {
                var comma = document.createElement('span');
                comma.innerHTML = ',';
                comma.className = 'num-span';
                comma.style.fontSize = this.fontSize + 'px';
                comma.style.height = this.spanHeight + 'px';

                var commaNext = document.createElement('span');
                commaNext.innerHTML = ',';
                commaNext.className = 'num-span';
                commaNext.style.fontSize = this.fontSize + 'px';
                commaNext.style.height = this.spanHeight + 'px';

                var oneNumContainer = document.createElement('div');
                oneNumContainer.className = 'one-num-container'
                oneNumContainer.appendChild(comma);
                oneNumContainer.appendChild(commaNext);
                this.spanContainer.push(oneNumContainer);
            }

            var span = document.createElement('span');
            span.innerHTML = '0';
            span.className = 'num-span';
            span.style.fontSize = this.fontSize + 'px';
            span.style.height = this.spanHeight + 'px';
            this.numSpan.push(span);

            var spanNext = document.createElement('span');
            spanNext.innerHTML = '0';
            spanNext.className = 'num-span';
            spanNext.style.fontSize = this.fontSize + 'px';
            spanNext.style.height = this.spanHeight + 'px';
            this.numSpanNext.push(spanNext);

            var oneNumContainer = document.createElement('div');
            oneNumContainer.className = 'one-num-container'
            oneNumContainer.appendChild(span);
            oneNumContainer.appendChild(spanNext);
            this.spanContainer.push(oneNumContainer);

            n++;
        }

        for(var j = lengthCon; j < this.spanContainer.length; j++) {
            this.container.insertBefore(this.spanContainer[j], this.container.getElementsByTagName('div')[0]);
        }

        var changeList = [];
        number.forEach(function(element, index) {
            if(this.numSpanNext[index].innerHTML != element) {
                this.numSpanNext[index].innerHTML = element;
                changeList.push(index);
            }
        }, this);
        this.number = number
        this.change(changeList);
    }

    else if(number.length < this.number.length) {
        var count = this.number.length - number.length;
        var domLength = this.container.getElementsByTagName('div').length;
        for(var i = 0; i < count; i++) {
            this.number.pop();
            this.numSpan.pop();
            this.numSpanNext.pop();
            this.spanContainer.pop();
            if(this.spanContainer[this.spanContainer.length - 1].getElementsByTagName('span')[0].innerHTML == ',') {
                this.spanContainer.pop();
            }
        }

        for(var j = this.spanContainer.length; j < domLength; j++) {
            this.container.removeChild(this.container.getElementsByTagName('div')[0]);
        }

        var changeList = [];
        number.forEach(function(element, index) {
            if(this.numSpanNext[index].innerHTML != element) {
                this.numSpanNext[index].innerHTML = element;
                changeList.push(index);
            }
        }, this);
        this.number = number
        this.change(changeList);
    }
}

Scoreboard.prototype.change = function(changeList) {
    for(var i = 0; i < changeList.length; i++) {
        Scoreboard.prototype.Animation(this.numSpan[changeList[i]].parentNode, 0, this.spanHeight);
    }
}

Scoreboard.prototype.Animation = function(dom, value, height) {
    dom.style.top = -value + 'px';
    value += 10;
    if(value <= height) {
        requestAnimationFrame(Scoreboard.prototype.Animation.bind(null, dom, value, height))
    }
}